<template>
    <p class="typetitle">购物车</p>
    <el-row>
        <el-col :span="10">
            <el-table :data="shopcarGoods" width="100%">
                <el-table-column prop="cover" label="缩略图">
                    <template #default="scope">
                        <img :src="api.imgUrl + scope.row.cover" class="tiny">
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="品名" />
            </el-table>
        </el-col>
        <el-col :span="14">
            <el-table :data="shopcar" width="100%">
                <el-table-column prop="amount" label="数量" />
                <el-table-column prop="price" label="总价" />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button @click="removeShopcar(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
    <el-button type="warning" @click="createOrder">下单</el-button>
    <el-button type="warning" @click="clearShopcar">清空购物车</el-button>

</template>

<script setup>
import api from '@/api/api';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex';

const store = new useStore();
var shopcar = ref([]);
var shopcarGoods = ref([]);

const removeShopcar = (id) => {
    api.removeShopCar(id)
        .then(ret => {
            if (ret.flag) {
                ElMessage({
                    message: '删除成功',
                    type: 'success'
                })
                setTimeout(() => {
                    init.apply();
                }, 1500)
            }
            else {
                ElMessage({
                    message: '删除失败',
                    type: 'error'
                })
            }
        })
}

const clearShopcar = () => {
    ElMessageBox.confirm(
        '该操作会清空购物车内所有内容，是否确认？',
        '注意！',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'error',
        }
    ).then(() => {
        api.clearShopCar(store.getters.userInfo.id)
            .then(ret => {
                if (ret.flag) {
                    ElMessage({
                        message: '清空成功',
                        type: 'success'
                    })
                    setTimeout(() => {
                        init.apply();
                    }, 1500)
                }
                else {
                    ElMessage({
                        message: '清空失败',
                        type: 'error'
                    })
                }
            })
    })
}

const createOrder = () => {
    api.createOrder(store.getters.userInfo.id)
        .then(ret => {
            if (ret.flag) {
                ElMessage({
                    message: '创建成功',
                    type: 'success'
                })
                setTimeout(() => {
                    init.apply();
                }, 1500)
            }
            else {
                ElMessage({
                    message: '创建失败',
                    type: 'error'
                })
            }
        })
}
// 初始化函数
const init = () => {
    api.showShopCar(store.getters.userInfo.id)
        .then(ret => {
            shopcar.value = ret.result;
        })
    api.showShopCarGoods(store.getters.userInfo.id)
        .then(ret => {
            shopcarGoods.value = ret.result;
        })
}

onMounted(init);

</script>

<style scoped>
.typetitle {
    text-align: left;
    margin-left: 10px;
    font-size: 30px;
    color: #E6A23C;
}

.tiny {
    width: 10%;
}
</style>
